<template>
  <div>
    <van-dropdown-menu :overlay="false" >
      <van-dropdown-item title="北京" class="itemss"/>
      <van-dropdown-item v-model="value" :options="option" />
      <van-dropdown-item title="全部时间" @opened="Change" @closed="Change">
        <van-calendar v-model="show" type="range" @confirm="onConfirm" />
      </van-dropdown-item>
    </van-dropdown-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 0,
      show: false,
      option: [
        { text: "综合排序", value: 0 },
        { text: "距离排序", value: 1 },
        { text: "价格降序", value: 2 },
        { text: "价格升序", value: 3 },
      ],
    };
  },
  methods: {
    onConfirm() {
      this.$refs.item.toggle();
    },
    Change() {
      this.show = !this.show;
    },
  },
};
</script>

<style lang="scss" scoped>
:deep(.van-dropdown-menu__bar){
  height: 30px;
  border-bottom: solid 1px rgb(242, 242, 242);
  box-shadow: 0px 0px 0px #888888;
}
:deep(.van-ellipsis){
  all: unset;
  // float: left;
  color:#999999;
  font-size: 12px;
}
:deep(.van-dropdown-menu__item){
  all: unset;
  float: left;
  margin-left: 20px;
  line-height: 20px;
}
:deep(.van-dropdown-menu__title::after){
  border-color: transparent transparent #999999 #999999;
}
</style>